<template>
    <div class="cartcontrol">
      <transition name="move">
        <div class="cart-decrease" :class="bing" v-show="food.count>0" @click="decreaseCart">
          <span class="inner inner1 icon-remove_circle_outline"></span>
        </div>
      </transition>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
      <div class="cart-add icon-add_circle" @click="addCart($event)" :class="bing"></div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
    export default {
        props: {
          food: {
            type: Object
          }
        },
      computed: {
        bing() {
          if(!this.food.count) {
            return 'bing'
          }
        }
      },
      methods: {
        addCart (event) {
          if(!event._constructed) {   // 如果没有_constructed属性 说明点击事件不是我们自定义的
           return
          }
          if(!this.food.count){
            Vue.set(this.food,'count',1)// 给food绑定属性 这样dom才会被观察到
          }else {
            this.food.count++
          }
          // this.$dispatch('cart.add',event.target) // 派发事件
          this.$emit('add', event.target);
          this.$emit('event', event.target);
        },
        decreaseCart(event) {
          if(!event._constructed) {
            return
          }
          if(this.food.count) {
              this.food.count--
          }
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .cartcontrol
    font-size: 0
    .cart-decrease
      display: inline-block
      padding: 6px
      transition: all 0.4s linear
      .inner
        display: inline-block
        line-height: 24px
        font-size: 24px
        color: rgb(0, 160, 220)
        transition: all 0.4s linear
        transform: rotate(0)
      &.move-enter-active
        transition: all 0.4s linear
      &.move-leave-active
        transition: all 0.4s  linear
      &.move-enter, &.move-leave-to  //刚进入和离开后的状态
        /* .slide-fade-leave-active for below version 2.1.8 */
        opacity: 0
        transform: translateX(24px)
        .inner1
          transform: rotate(180deg)
      &.bing
        box-shadow: 5px 5px 5px #888888
        border-radius: 50%
        background: rgba(246,220,10,0.5)
    .cart-count
      display: inline-block
      vertical-align: top
      width: 12px
      padding-top: 6px
      line-height: 24px
      text-align: center
      font-size: 10px
      color: rgb(147,153,159)
    .cart-add
      display: inline-block
      padding: 6px
      line-height: 24px
      font-size: 24px
      color: rgb(0,160,220)
      &.bing
        box-shadow: 5px 5px 5px #888888
        border-radius: 50%
        background: rgba(246,220,10,0.5)

</style>
